<template>
  <view class="main">
    <header-vue
      bgColor="transparent"
      :back="true"
      color="#fff"
      title-color="#fff"
      title-size="32rpx"
      title="我的分销"
    ></header-vue>
    <image  :src="IMAGE_URL+'/static/user/fx-bg.png'" class="bg-box"></image>
    <view class="user">
      <view class="flex start info">
        <image :src="IMAGE_URL + '/static/login/bg.png'" class="avatar"></image>

        <view>
          <view class="font30 fontbold-500">王小明</view>
          <view class="level font24" @click="onLevelClick">{{
            `分销员等级：v1 >`
          }}</view>
        </view>
      </view>
      <view class="wallet">
        <view class="flex center between info-yongjin">
          <view class="flex center">
            <image  :src="IMAGE_URL+'/static/user/yongjinqianbao.png'"></image>
            <view>
              <view class="font40">9999.00</view>
              <view class="font20">当前佣金（元）</view>
            </view>
          </view>
          <view class="flex column center">
            <image  :src="IMAGE_URL+'/static/user/jinbi.png'" class="coin-icon"></image>
            <view @click="onWithdrawClick" class="flex center btn-tixian"
              >去提现
              <i class="iconfont icon-jiantou font24" style="height: 24rpx"></i
            ></view>
          </view>
        </view>
        <view class="flex between leiji">
          <view class="item">
            <view class="font36 fontbold-500">999.00</view>
            <view class="font20">昨天收益（元）</view>
          </view>
          <view class="item">
            <view class="font36 fontbold-500">999.00</view>
            <view class="font20">累计已提（元）</view>
          </view>
          <view class="item">
            <view class="font30 fontbold-500">400</view>
            <view class="font20">推广订单</view>
          </view>
        </view>
      </view>
    </view>
    <view class="rank-box">
      <view class="grey-bg"></view>
      <view class="grey-bg1"></view>
      <view class="flex center between order-item">
        <view
          v-for="item in typeList"
          class="flex column"
          :key="item.name"
          @click="goPage(item.url)"
        >
          <image :src="IMAGE_URL+item.icon" mode="aspectFit"></image>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="white-box">
      <view class="flex start font30 fontbold-500">
        <image :src="IMAGE_URL+'/static/master/title-icon.png'" class="title-icon"></image>
        <view>佣金明细</view>
      </view>
      <view
        v-for="(item, index) in 10"
        :key="index"
        class="flex center between item"
      >
        <image  :src="IMAGE_URL+'/static/user/icon-yongjin.png'" class="list-icon"></image>
        <view style="flex: 1">
          <view class="font28">订单编号：4353524234</view>
          <view class="font24">2025-04-06 15:45</view>
        </view>
        <view class="font32 fontbold-500">+10.00</view>
      </view>
    </view>
    <levelPopup
      :show="showLevelPopup"
      @close="showLevelPopup = false"
    ></levelPopup>
  </view>
</template>

<script>
import headerVue from "../../components/header.vue";
import levelPopup from "@/components/level-popup/index.vue";
import appConfig from "@/config/app.js";
export default {
  data() {
    return {
      showLevelPopup: false,
      IMAGE_URL: appConfig.IMAGE_URL,
      typeList: [
        {
          name: "佣金排行",
          icon: "/static/user/yjph.png",
          url: "/views-user/my/commission-rank",
        },
        {
          name: "推广人排行",
          icon: "/static/user/tgrph.png",
          url: "/views-user/my/promoter-rank",
        },
        {
          name: "推广拉新",
          icon: "/static/user/tglx.png",
          url: "/views-user/my/promoter-new",
        },
        {
          name: "推广名片",
          icon: "/static/user/tgmp.png",
          url: "/views-master/my/share-app",
        },
      ],
    };
  },
  components: {
    headerVue,
    levelPopup,
  },
  methods: {
    onWithdrawClick() {
      uni.navigateTo({
        url: "/views-user/my/commission-withdraw",
      });
    },
    onLevelClick() {
      this.showLevelPopup = true;
    },
    goPage(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main{
  position: relative;
}
.bg-box {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}

.user {
  padding: 0 50rpx;
  box-sizing: border-box;

  .info {
    color: #ffffff;

    .avatar {
      width: 84rpx;
      height: 84rpx;
      margin-right: 24rpx;
      border-radius: 50%;
    }

    .level {
      color: #ffc76b;
      margin-top: 8rpx;
    }
  }

  .wallet {
    margin-top: 28rpx;
    height: 280rpx;
    background: #f3f9ff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 34rpx 28rpx 28rpx 28rpx;
    box-sizing: border-box;

    .info-yongjin {
      image {
        width: 72rpx;
        height: 72rpx;
        margin-right: 8rpx;
      }

      .font40 {
        font-weight: 600;
      }
    }

    .coin-icon {
      width: 48rpx !important;
      height: 48rpx !important;
    }

    .btn-tixian {
      width: 126rpx;
      height: 44rpx;
      background: #1ca8ff;
      box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      font-size: 24rpx;
      color: #ffffff;
      margin-top: -10rpx;
    }

    .leiji {
      padding-top: 20rpx;
      margin-top: 20rpx;
      box-sizing: border-box;
      border-top: 1rpx solid #dddddd;

      .item {
        text-align: center;
      }

      .font20 {
        margin-top: 4rpx;
      }
    }

    .font20 {
      color: #666;
    }
  }
}

.rank-box {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.04);
  border-radius: 0rpx 0rpx 20rpx 20rpx;
  margin: 0 32rpx;
  position: relative;
  margin-top: -20rpx;

  .grey-bg {
    background: #e0dcef;
    position: absolute;
    width: 29rpx;
    height: 25rpx;
    transform: rotate(45deg);
    margin-top: -8rpx;
    margin-left: 5rpx;
    z-index: -1;
  }

  .grey-bg1 {
    background: #e0dcef;
    position: absolute;
    width: 29rpx;
    height: 13rpx;
    transform: rotate(45deg);
    z-index: -1;
    margin-top: -10rpx;
    z-index: -1;
    right: 0;
  }

  .order-item {
    font-size: 24rpx;
    color: #333333;
    padding: 40rpx 28rpx;
    box-sizing: border-box;

    image {
      width: 72rpx;
      height: 72rpx;
      margin-bottom: 12rpx;
    }
  }
}

.white-box {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: 28rpx 32rpx;
  padding: 28rpx;
  box-sizing: border-box;

  .title-icon {
    width: 32rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }

  .item {
    margin-top: 28rpx;
  }

  .list-icon {
    width: 68rpx;
    height: 76rpx;
    margin-right: 20rpx;
  }

  .font24 {
    color: #999999;
    margin-top: 12rpx;
  }
}
</style>
